<template>
	<div class="app-container">

		<el-row class="Jcommon-search-box" :gutter="16">
			<el-form :model="query" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

				<el-form-item label="付款方式">
					<el-select v-model="query.payId" placeholder="请选择" clearable>
						<el-option v-for="dict in payList" :key="dict.id" :label="dict.name" :value="parseInt(dict.id)"
							:disabled="dict.disabled"></el-option>
					</el-select>
				</el-form-item>


				<el-form-item label="类型">
					<el-select v-model="query.state" placeholder="请选择">
						<!-- <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
						<el-option v-for="dict in dict.type.zhwy_temporary_deposit_state" :key="dict.value"
							:label="dict.label" :value="parseInt(dict.value)"></el-option>
					</el-select>
				</el-form-item>

				<!-- 	<el-form-item label="开始时间" prop="beginTime">
	        <el-date-picker clearable
	          v-model="query.beginTime"
	          type="date"
	          value-format="yyyy-MM-dd"
	          placeholder="请选择开始时间">
	        </el-date-picker>
	      </el-form-item>
	      <el-form-item label="结束时间" prop="endTime">
	        <el-date-picker clearable
	          v-model="query.endTime"
	          type="date"
	          value-format="yyyy-MM-dd"
	          placeholder="请选择结束时间">
	        </el-date-picker>
	      </el-form-item> -->


				<el-form-item label="缴费时间">
					<el-date-picker v-model="pickTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
						:picker-options="pickerOptions" value-format="timestamp" clearable
						:editable="false"></el-date-picker>

						<!-- <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="pickTime" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker> -->
				</el-form-item>

				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
					<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</el-row>


		<!-- <el-row :gutter="8">
        <el-form @submit.native.prevent>

            <el-form-item label="付款方式">
              <el-select v-model="query.payMethod" placeholder="请选择" clearable>
                <el-option
                  v-for="dict in payList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="parseInt(dict.id)"
                  :disabled="dict.disabled"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="类型">
              <el-select v-model="query.type" placeholder="请选择">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

        </el-form>
    </el-row> -->

		<div class="Jcommon-layout-main Jflex-main">
			<!--     "-->
			<el-table v-loading="loading" :data="collectChargeDetailsList">
				<el-table-column prop="chargeitemId" label="缴费内容" align="left" width="150px">
					<template slot-scope="scope">
						<dict-tag-chargeitem :options="chargeList" :value="scope.row.chargeitemId" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="付款人" align="left" />
				<el-table-column prop="type" label="类型" align="left">
					<template slot-scope="scope">
						<el-tag size="small" v-if="scope.row.type == 0">付款</el-tag>
						<el-tag size="small" type="danger" v-else-if="scope.row.type == 1">退款</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="chargeTime" label="付款时间" align="left" width="150px" />
				<el-table-column prop="payId" label="付款方式" align="left">
					<template slot-scope="scope">
						<dict-tag-paymethod :options="payList" :value="scope.row.payId" />
					</template>
				</el-table-column>
				<el-table-column prop="money" label="收款金额（元）" align="left" />
				<!--          -->
				<!-- <el-table-column prop="prePayMoney" label="预存款支付（元）" align="left" />
          <el-table-column prop="changeMoney" label="找零金额（元）" align="left" />
          <el-table-column prop="preSaveMoney" label="找零结转金额（元）" align="left" /> -->

			</el-table>
			<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
				@pagination="getList" />
		</div>

	</div>
</template>

<script>
	import request from '@/utils/request';

	import {
		listTemporarydeposit,
		getTemporarydeposit,
		addTemporarydeposit,
		updateTemporarydeposit,
	} from "@/api/system/temporarydeposit";
	import {
		listPaymentmethod,
		getPaymentmethod,
		delPaymentmethod,
		addPaymentmethod,
		updatePaymentmethod
	} from "@/api/system/paymentmethod";

	import {
		listChargeitem,
		getChargeitem
	} from "@/api/charge/chargeitem";

	export default {
		components: {},
		dicts: ['zhwy_temporary_deposit_state'],
		data() {
			return {
				query: {
					payId: null,
					state: '',
					name: null,
					beginTime: null,
					endTime: null,
					chargeTime:null,
					pageNum: 1,
					pageSize: 20
				},
				// 显示搜索条件
				showSearch: true,
				defaultProps: {
					children: 'children',
					label: 'fullName',
				},
				// 收费时间
				pickTime: [],
				// 日期组件
				pickerOptions: {
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							},
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							},
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							},
						},
					],
				},

				// typeOptions: [
				//   { label: '付款', value: 'pay' },
				//   { label: '退款', value: 'refund' },
				// ],
				//支付方式
				payList: [],
				// 收费项目
				chargeList: [],
				//列表
				collectChargeDetailsList: [],
				//总条数
				total: 0,
				//遮罩层
				loading: true,
				//
				listQuery: {
					currentPage: 1,
					pageSize: 20,
					sort: 'desc',
					sidx: 'pay_time',
				},
				// columnList: [
				//   { prop: 'payTime', label: '付款时间' },
				//   { prop: 'payMethod', label: '支付方式' },
				//   { prop: 'money', label: '单行输入' },
				//   { prop: 'type', label: '支付和退款' },
				//   { prop: 'describe', label: '描述' },
				//   { prop: 'certificate', label: '支付凭证' },
				// ],
			};
		},
		computed: {},
		created() {
			this.getList();
			this.getPayMethodList();
			this.getChargeList();
		},
		//侦听器
		watch: {
			pickTime() {
				if (this.pickTime) {
					// console.log(this.pickTime);
					this.query.beginTime = this.pickTime[0]
					this.query.endTime = this.pickTime[0]
					console.log(this.query.beginTime)
				} else {
					this.query.beginTime = '';
					this.query.endTime = '';
				}
			}
		},
		methods: {
			//获取所有数据
			getList() {
				console.log(this.query)
				listTemporarydeposit(this.query).then(resp => {
					this.loading = true;
					this.collectChargeDetailsList = resp.rows;
					this.total = resp.total;
					this.loading = false;
				})
			},
			//获取支付方式
			getPayMethodList() {
				listPaymentmethod().then(res => {
					this.payList = res.rows;
				});
			},
			// 获取收费项目
			getChargeList() {
				listChargeitem().then((res) => {
					this.chargeList = res.rows;
				});
			},
			// initData() {
			//   this.loading = true;

			//   if (this.pickerVal && this.pickerVal.length) {
			//     this.query.payBeginDate = this.pickerVal[0];
			//     this.query.payEndDate = this.pickerVal[1];
			//   } else {
			//     this.query.payBeginDate = '';
			//     this.query.payEndDate = '';
			//   }
			//   let query = {
			//     ...this.listQuery,
			//     ...this.query,
			//   };
			//
			//   request({
			//     url: `/statistics/PaymentPayLog`,
			//     method: 'get',
			//     data: query,
			//   }).then(res => {
			//     this.collectChargeDetailsList = res.data.list;
			//     this.total = res.data.pagination.total;
			//     this.loading = false;
			//   });
			// },

			// 搜索
			search() {
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: 'desc',
					sidx: 'pay_time',
				};
				console.log(this.query.beginTime);
				console.log(this.query.endTime);
				this.getList();
				// console.log(this.pickTime[0].getTime());
				// console.log(this.pickTime[1].getTime());

				
			},
			refresh(isrRefresh) {
				this.formVisible = false;
				if (isrRefresh) this.reset();
			},
			reset() {
				for (let key in this.query) {
					this.query[key] = undefined;
				}
				this.pickTime = [];
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: 'desc',
					sidx: 'pay_time',
				};
				this.getList();
			},
		},
	};
</script>
